<template>
  <div class="carouselImageComponent" v-if="control">
    <collapseComponent
      v-for="(cr, crIndex) in control.right"
      :key="cr.id"
      :title="cr.name"
      direction="column"
      :open="cr.open"
      :rightIndex="crIndex"
      @switchCollapse="switchCollapse"
    >
      <div
        class="catalog"
        v-for="(crc, crcIndex) in cr.catalog"
        :key="crc.id"
        :style="{ display: crc.display }"
      >
        <component
          v-bind:is="crc.controlName"
          v-if="crc.display === 'block'"
          :item="crc"
          :id="control.id"
          :rightIndex="crIndex"
          :catalogIndex="crcIndex"
          @updateParent="updateParent"
        ></component>
      </div>
    </collapseComponent>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "carouselImageComponent",
  data() {
    return {
      control: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["controlsIndex", "controlData"],
  components: {
    collapseComponent: () => import("../../../components/collapseComponent"),
    radioGroupComponent: () => import("./lone/radioGroupComponent"),
    colorComponent: () => import("./lone/colorComponent"),
    inputComponent: () => import("./lone/inputComponent"),
    radioComponent: () => import("./lone/radioComponent"),
    carouselImageGroupComponent: () =>
      import("./group/carouselImageGroupComponent"),
    sliderComponent: () => import("./lone/sliderComponent"),
    chooseImageComponent: () => import("./lone/chooseImageComponent"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //从单个子组件中更新到大类组件这里来
    updateParent(params) {
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;
      //显示样式
      if (pe === "carouselDotsStyle") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        this.control.main.carouselDotsStyleCls = p.carouselDotsStyleCls;
      }
      //显示位置
      if (pe === "carouselDotsPosition") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        this.control.main.carouselDotsPositionCls = p.carouselDotsPositionCls;
      }
      //选中颜色
      if (pe === "carouselDotsHighLightColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //容器高度
      if (pe === "wrapperHeight") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //自动切换
      if (pe === "autoplay") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //切换间隔
      if (pe === "interval") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //循环显示
      if (pe === "loop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //展示方向
      if (pe === "direction") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //展示类型
      if (pe === "type") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //指示器外置
      if (pe === "indicatorPosition") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //轮播图列表内容
      if (pe === "carouselList") {
        this.control.right[ri].catalog[ci].list = JSON.parse(pv);
        this.control.main[pe] = null;
        this.control.main[pe] = JSON.parse(pv);
      }
      //上间距
      if (pe === "paddingTop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //下间距
      if (pe === "paddingBottom") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //左右间距
      if (pe === "paddingLR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //上边角
      if (pe === "borderRadiusTop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //下边角
      if (pe === "borderRadiusBottom") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //容器样式
      //背景颜色
      if (pe === "wrapperBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //背景图片
      if (pe === "wrapperBgImg") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //上间距
      if (pe === "wrapperPT") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //下间距
      if (pe === "wrapperPB") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //左右间距
      if (pe === "wrapperPLR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //上边角
      if (pe === "wrapperBTR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //下边角
      if (pe === "wrapperBBR") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }


      //更新到vuex
      this.updateControls(this.control, p.needUpdateMain);

      //更新到main
      if (p.needUpdateMainChild) {
        const emitName = this.control.ename + this.control.id;
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit(emitName, JSON.stringify(this.control));
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
      this.updateControls(this.control);
    },
    //更新到vuex
    updateControls(control, needUpdateMain) {
      if (this.needUpdate) {
        let controls = this.decorate.controls;
        controls[this.controlsIndex] = JSON.parse(JSON.stringify(control));
        this.$store.dispatch("controls", controls);
        if (needUpdateMain) {
          Bus.$emit("updateMain");
        }
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.carouselImageComponent {
  .catalog {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px 10px 0px;
    box-sizing: border-box;
  }
}
</style>